<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item label="变量名称:" prop="variable_name">
        <el-input v-model="form.variable_name" clearable placeholder="变量名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query" :loading="loading">查询</el-button>
        <!-- <el-button type='success' @click='output' :loading='downloading'>导出</el-button> -->
        <el-button type="success" @click="addForm">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <hcTable :table-data="list" :options="options" :columns="tableColumn" @size-change="handlerPageSize" @current-change="handlerPageIndex" @command="handleAction">
      <template #enabled="{ row }">{{ row.enabled ? "可用" : "禁用" }}</template>
    </hcTable>
    <addAndEdit :options="editOption" @closeDialog="closeDialog" />
  </div>
</template>

<script setup>
import { reactive } from "vue";
import addAndEdit from "./dialog/addAndEdit.vue";
import useQueryTable from "@/hooks/useQueryTable";

let form = reactive({
  variable_name: "",
});

let tableColumn = [
  { type: "index", width: "60", label: "序号", align: "center", fixed: true },
  { prop: "variable_name", label: "变量名称", align: "center" },
  { prop: "description", label: "变量描述", align: "center" },
  { prop: "data_type", label: "数据类型", align: "center" },
  { prop: "min_value", label: "最小值", align: "center" },
  { prop: "max_value", label: "最大值", align: "center" },
  { prop: "units", label: "单位", align: "center" },
  { prop: "plc_id", label: "PLC地址", align: "center" },
  {
    prop: "enabled",
    label: "是否可用",
    align: "center",
    slot: "enabled",
    sortable: true,
  },
  {
    width: "120",
    label: "操作",
    align: "center",
    buttons: [
      {
        name: "编辑",
        type: "warning",
        command: "edit",
      },
      // {
      //   name: "删除",
      //   type: "danger",
      //   command: "delete",
      // },
    ],
  },
];

let { list, query, output, addForm, options, loading, editOption, downloading, closeDialog, handleAction, handlerPageSize, handlerPageIndex } = useQueryTable(
  { get: "/AvpStatusVariable/GetPageList", del: "/AvpStatusVariable/Delete" },
  form
);
</script>

<style lang="scss" scoped></style>
